import React from "react";
import { NavLink, Routes, Route } from "react-router-dom";

const Home = () => {
  return <div>这是首页</div>;
};
const About = () => {
  return <div>这是关于页</div>;
};

const App = () => {
  return (
    <>
      <h2>router-v6-navLink</h2>
      <ul>
        <li>
          {/* NavLink和之前一样做导航高亮，也会自动加上active类名 */}
          {/* activeClassName属性没有了 */}
          {/* style属性可以接收一个函数，并且函数有一个对象作为参数，对象里面可以解构isActive布尔值 */}
          <NavLink
            to="/home"
            style={({ isActive }) => {
              // console.log(isActive);
              // return {};
              if (isActive) {
                return {
                  color: "red",
                };
              }
            }}
          >
            首页
          </NavLink>
        </li>
        <li>
          <NavLink to="/about">关于页</NavLink>
        </li>
      </ul>

      <hr />

      <Routes>
        <Route path="/home" element={<Home />}></Route>
        <Route path="/about" element={<About />}></Route>
      </Routes>
    </>
  );
};

export default App;
